<template>
  <transition name="fade">
    <div v-if="progressShow" class="frame progress">
      <div class="bar-bg" :class="{ 'padding-large': paddingLarge }">
        <div class="light-bar" :style="{ transform: progressBarTransform }">
          <div class="light" :style="{ transform: progressBarScaleRevert }"></div>
        </div>
        <div class="bar" :style="{ transform: progressBarTransform }">
          <div class="bar-head" :style="{ transform: progressBarScaleRevert }"></div>
          <div class="bar-tail" :style="{ transform: progressBarScaleRevert }"></div>
        </div>
        <div v-if="progressMsg" class="msg font-size-10 font-weight-500 line-height-120">{{ $t(progressMsg) }}</div>
        <div class="percent font-size-10 font-weight-500 line-height-120">{{ progressPercent }}</div>
      </div>
    </div>
  </transition>
  <div v-if="uploadStatus === UPLOAD_STATUS.FAIL" class="frame fail-frame gap-col-8">
    <div class="reupload" @click="$emit('reupload')">
      <Icon name="refresh"></Icon>
    </div>
    <span class="font-size-14 font-weight-500 line-height-140 text-primary">
      {{ $t('content.uploadFail') }}
    </span>
    <span class="font-size-14 font-weight-500 line-height-140 text-primary">
      {{ uploadFailMsg }}
    </span>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { useRafFn } from '@vueuse/core'
import { $t } from '@/i18n'
import { UPLOAD_STATUS } from '@/constant/publish'

const props = defineProps({
  uploadProgress: { type: Number, required: true },
  uploadStatus: { type: String, required: true },
  uploadFailMsg: { type: String },
  progressMsg: { type: String },
  paddingLarge: { type: Boolean },
})

defineEmits(['reupload'])

const progress = ref(0)
const progressPercent = computed(() => `${Math.floor(progress.value * 100)}%`)
const progressBarTransform = computed(() => `translateX(0.25rem) scaleX(${progress.value})`)
const progressBarScaleRevert = computed(() => `scaleX(${1 / progress.value})`)
const progressShow = computed(() => props.uploadStatus !== UPLOAD_STATUS.FAIL && progress.value < 1)
const { pause, resume } = useRafFn(() => {
  if (props.uploadProgress === 0) {
    progress.value = 0
  } else {
    if (progress.value < props.uploadProgress && progress.value < 1) {
      progress.value += 0.01
    } else {
      pause()
    }
  }
})

watch(() => props.uploadProgress, resume)
</script>

<style lang="scss" scoped>
.frame {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
}

.progress {
  background: rgba(24, 25, 37, 0.5);
  backdrop-filter: blur(0.25rem);

  .bar-bg {
    width: calc(100% - 2rem);
    height: 0.625rem;
    border-radius: 1rem;
    background: rgba(24, 25, 37, 0.4);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    &.padding-large {
      width: calc(100% - 7rem);
    }

    .bar,
    .light-bar {
      width: calc(100% - 2px - 0.5rem);
      height: calc(100% - 2px);
      background: #fff;
      // transform: translateX(0.25rem) scaleX(0.36);
      transform-origin: left;
      position: absolute;
      top: 1px;
      left: 1px;

      .bar-head,
      .bar-tail {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 0.25rem;
        background: #fff;
        position: absolute;
        top: 0;
        // transform: scaleX(calc(1 / 0.36));
      }
      .bar-head {
        left: -0.25rem;
      }
      .bar-tail {
        right: -0.25rem;
      }

      .light {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 0.25rem;
        background: rgba(255, 215, 222, 0.5);
        // filter: blur(3.5px); safari 在動畫的時候會失效，改用box-shadow取代
        box-shadow: 0px 0px 0.5rem #ffd7de;
        position: absolute;
        right: -0.25rem;
      }
    }

    .msg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -1.5rem);
    }
    .percent {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(0.5rem);
    }
  }
}

.fail-frame {
  border: 0.0625rem solid rgb(var(--v-theme-primary));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .reupload {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    background: rgb(var(--v-theme-primary));
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}
</style>
